<template>
  <el-dialog
    title="订单物流"
    :visible.sync="dialogVisible"
    width="350px">
    <div id="order-express-more-dialog" v-if="dialogVisible">
      <div class="item" v-for="(express,index) in allExpressList">
        <div class="type-name" v-text="express.typeName+':'"></div>
        <div class="type-list">
          <div class="item" @click="changeExpress(item)" v-for="(item,_index) in express.expressList" :class="item.expressNumber===orderExpress.expressNumber?'curr':''">
            <span class="name" v-text="item.expressCompany"></span>
            <span class="number" v-text="item.expressNumber"></span>
          </div>
        </div>
        <div class="c"></div>
      </div>
    </div>
  </el-dialog>

</template>

<script>
export default {
  name: 'OrderExpressMoreDialog',
  watch:{
    $route:function () {
      this.dialogVisible=false
    }
  },
  data: function () {
    return {
      callback:null,
      dialogVisible:false,
      orderExpress:{},
      allExpressList:[
        {
          typeName:'发货',
          key:0,
          expressList:[
          ]
        },
        {
          typeName:'退货',
          key:1,
          expressList:[
          ]
        },
        {
          typeName:'换货(发货)',
          key:2,
          expressList:[
          ]
        },
      ]
    }
  },
  mounted () {
    let $this = this
    $this.bus.$on('OrderExpressMoreDialogCallBus', function (orderExpress,allOrderExpressMap,callback) {
      $this.allExpressList.forEach(function (value, index) {
        var list=allOrderExpressMap[value.key]
        if (!list){
          list=[]
        }
        $this.allExpressList[index].expressList=list
      })
      $this.orderExpress = orderExpress
      $this.dialogVisible = true
      $this.callback=callback
      $this.$forceUpdate()
    })

  },
  methods: {
    changeExpress:function (item) {
      if (item.id===this.orderExpress.id){
        return;
      }
      if (typeof this.callback==='function'){
        this.callback(item)
        this.dialogVisible = false
      }
    }
  }
}
</script>

<style scoped>

</style>
